<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item to="/dashboard">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 按钮 -->
    <el-card class="ctgy-card">
      <el-button
        class="btn1"
        type="primary"
        size="medium"
        icon="el-icon-circle-plus"
      >
        添加分类
      </el-button>

      <!-- 数据表格 -->
      <el-table :data="Category" border>
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column
          label="分类名称"
          prop="Category-Name"
        ></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scoped">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="handleEdit(scoped.row)"
              >编辑
            </el-button>

            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete-solid"
              @click="handleDelete(scoped.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Category',
  data() {
    return {
      Category: [
        { id: 1, Category: '心情' },
        { id: 2, Category: '心情' },
        { id: 3, Category: '心情' },
      ],
      page: 1,
      size: 5,
      total: 0,
      dialogVisible: false,
    }
  },
}
</script>

<style>
.ctgy-card {
  margin-top: 20px;
}
.btn1 {
  margin-bottom: 20px;
}
</style>
